<!--导航-->
<ul class="navbar">
    <li class="logo"><img th:src="@{image/logo-mealpal.png}"/></li>
    <li class="search">
        <input id="searchContent" class="input-search" type="text" placeholder="请输入食谱名/食材/作者"/>
        <a class="search-btn" href="javascript:void(0)" onclick="window.location = '/search?searchContent='+$('#searchContent').val()">搜索</a>
    </li>
    <!--没有登录-->
    <shiro:notAuthenticated>
    <li class="no-login">
        <a class="link" href="/login">登录</a>
        <a class="link" href="/register">注册</a>
    </li>
    </shiro:notAuthenticated>
    <!--登录成功-->
    <shiro:authenticated>
        <li class="login-success">
            <ul class="user-info">
                <li id="personalCenterLink" class="personal-center-link">
                    <ul>
                        <a href="/userInfo">
                            <img class="head-portrait" th:src="${session.baseUserInfo.headimg}"/>
                            <span class="username word-overflow" th:text="${session.baseUserInfo.nick}"></span>
                        </a>
                        <ul id="personalCenter" class="personal-center">
                            <li><a href="/publishCookbook">发布食谱</a></li>
                            <li><a href="/logout">退出登录</a></li>
                        </ul>
                    </ul>
                </li>
                <li><a class="link" href="/shoppingCart">购物车</a></li>
                <li><a class="link" href="/myKitchen">厨房</a></li>
            </ul>
        </li>
    </shiro:authenticated>
</ul>
<!--导航列表-->
<div class="nav-box">
    <div class="navbar-title">
        <li class="li-link"><a class="link current" href="/">首页</a></li>
        <li class="li-link" id="classificationOfRecipesLink">
            <a class="link" href="#">食谱分类&nbsp;<span class="link-glyphicon glyphicon glyphicon-chevron-down"></span></a>
            <ul id="expMenu" class="exp-menu">
                <li class="exp-menu-li">
                    <ul class="category-ul">
                        <li><a class="category-name" href="#">家常食谱</a></li><br/>
                        <li><a class="exp-link" href="/search?searchContent=家常菜">家常菜</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=素食">素食</a></li>
                        <li><a class="exp-link" href="/search?searchContent=早餐">早餐</a></li>
                        <li><a class="exp-link" href="/search?searchContent=午餐">午餐</a></li>
                        <li><a class="exp-link" href="/search?searchContent=晚餐">晚餐</a></li>
                        <li><a class="exp-link" href="/search?searchContent=夜宵">夜宵</a></li>
                    </ul>
                </li>
                <li class="exp-menu-li">
                    <ul class="category-ul">
                        <li><a class="category-name" href="#">烹饪难度</a></li><br/>
                        <li><a class="exp-link" href="/search?searchContent=简单">简单</a></li>
                        <li><a class="exp-link" href="/search?searchContent=普通">普通</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=高级">高级</a></li>
                        <li><a class="exp-link" href="/search?searchContent=神级">神级</a></li>
                    </ul>
                </li>
                <li class="exp-menu-li">
                    <ul class="category-ul">
                        <li><a class="category-name" href="#">工艺</a></li><br/>
                        <li><a class="exp-link" href="/search?searchContent=蒸">蒸</a></li>
                        <li><a class="exp-link" href="/search?searchContent=煮">煮</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=电饭煲">电饭煲</a></li>
                        <li><a class="exp-link" href="/search?searchContent=微波炉">微波炉</a></li>
                        <li><a class="exp-link" href="/search?searchContent=烤箱">烤箱</a></li>
                    </ul>
                </li>
                <li class="exp-menu-li">
                    <ul class="category-ul">
                        <li><a class="category-name" href="#">适宜人群</a></li><br/>
                        <li><a class="exp-link" href="/search?searchContent=健身达人">健身达人</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=减肥达人">减肥达人</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=养颜系列">养颜系列</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=孕妇">孕妇</a></li>
                        <li><a class="exp-link" href="/search?searchContent=产妇">产妇</a></li>
                        <li><a class="exp-link" href="/search?searchContent=婴儿">婴儿</a></li>
                        <li><a class="exp-link" href="/search?searchContent=儿童">儿童</a></li>
                        <li><a class="exp-link" href="/search?searchContent=老人">老人</a></li>
                        <li><a class="exp-link" href="/search?searchContent=幼儿">幼儿</a></li>
                        <li><a class="exp-link" href="/search?searchContent=哺乳期">哺乳期</a></li>
                        <li><a class="exp-link" href="/search?searchContent=青少年">青少年</a></li>
                    </ul>
                </li>
                <li class="exp-menu-li">
                    <ul class="category-ul">
                        <li><a class="category-name" href="#">食谱口味</a></li><br/>
                        <li><a class="exp-link" href="/search?searchContent=微辣">微辣</a></li>
                        <li><a class="exp-link" href="/search?searchContent=中辣">中辣</a></li>
                        <li><a class="exp-link" href="/search?searchContent=麻辣">麻辣</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=酸甜">酸甜</a></li>
                        <li><a class="exp-link" href="/search?searchContent=酸咸">酸咸</a></li>
                        <li><a class="exp-link" href="/search?searchContent=咸甜">咸甜</a></li>
                        <li><a class="exp-link" href="/search?searchContent=甜味">甜味</a></li>
                        <li><a class="exp-link" href="/search?searchContent=苦味">苦味</a></li>
                        <li><a class="exp-link" href="/search?searchContent=原味">原味</a></li>
                        <li><a class="exp-link" href="/search?searchContent=清淡">清淡</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=葱香">葱香</a></li>
                        <li><a class="exp-link" href="/search?searchContent=蒜香">蒜香</a></li>
                        <li><a class="exp-link" href="/search?searchContent=酱香">酱香</a></li>
                        <li><a class="exp-link" href="/search?searchContent=孜然">孜然</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=麻香">麻香</a></li>
                        <li><a class="exp-link" href="/search?searchContent=其他">其他</a></li>
                    </ul>
                </li>
                <li class="exp-menu-li">
                    <ul class="category-ul">
                        <li><a class="category-name" href="#">烹饪时间</a></li><br/>
                        <li><a class="exp-link" href="/search?searchContent=10分钟">10分钟</a></li>
                        <li><a class="exp-link" href="/search?searchContent=20分钟">20分钟</a></li>
                        <li><a class="exp-link" href="/search?searchContent=半小时">半小时</a><span class="hot-icon"></span></li>
                        <li><a class="exp-link" href="/search?searchContent=一小时">一小时</a></li>
                        <li><a class="exp-link" href="/search?searchContent=数小时">数小时</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="li-link"><a class="link" href="/search?searchContent=&orderBy=createdate desc">最新食谱</a></li>
        <li class="li-link"><a class="link" href="/search?searchContent=&orderBy=browsequantity desc">热度食谱</a></li>
        </ul>
    </div>
</div>
<link rel="stylesheet" th:href="@{/css/nav-bottom.css}"/>
<script>
    $(function () {
       $('#searchContent').val($('#searchTitle').html());
    });
</script>